<template>
  <div class="page-mobile-school">
    <white-header :isShowTopNav="true" :isShowBack="true" :isShowRight="true" title="院校库"></white-header>
    <div class="hot-yx-menu">
      <div class="yx-rec-item" v-for="(item,index) in hot_school_list" :key="item.id" @click="toPath('/m/school-detail?id=' + item.id)">
        <img :src="item.ico" alt="">
        <h3>{{item.name}}</h3>
      </div>
      
    </div>
    <div class="select-action">
      <van-dropdown-menu class="select-menu">
        <van-dropdown-item
          v-model="search_form.region"
          :options="region_list"
          @change="handleFilter()"
        />
        <van-dropdown-item
          @change="handleFilter()"
          v-model="search_form.hierarchy"
          :options="hierarchy_list"
        />
        <van-dropdown-item
          @change="handleFilter()"
          v-model="search_form.type"
          :options="type_list"
        />
      </van-dropdown-menu>
    </div>
    <div class="yx-list">
      <div class="yx-item" v-for="(item,index) in school_list" :key="item.id" @click="toPath('/m/school-detail?id=' + item.id)">
        <div class="yx-item-left">
          <img :src="item.ico" alt="">
        </div>
        <div class="yx-item-right">
          <h3>{{ item.name }}</h3>
          <p>{{ item.introduction }}</p>
        </div>
      </div>
      
    </div>
    <div class="no-data" v-if="school_list.length == 0">
      <van-empty description="暂时没有院校哦~" />
    </div>
    <div class="footer" v-if="school_list.length != 0 && school_list.length === total">
      <span class="tips">我是有底线的</span>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getCollegePulldown, getSchoolCollege,  } from "~/api/school";
export default {
  data() {
    return {
      region_list:[
        {
          text: "区域",
          value: "all",
        },
      ],
      hierarchy_list:[
        {
          text: "层次",
          value: "all",
        },
      ],
      type_list:[
        {
          text: "专业",
          value: "all",
        },
      ],
      search_form:{
        region:'all',
        hierarchy:'all',
        type:'all',
      },
      school_list: [], //院校
      hot_school_list:[],
      pageSize: 10,
      page: 1,
      total: 0,
    };
  },
  components: {
    WhiteHeader,
  },
  props: ["setDisabled", "refreshFun", "setLoading"],
  created() {
    // this.setDisabled(false);
    // this.initPages();
    // this.refreshFun(() => {
    //   this.page = 1;
    //   this.getNews();
    //   this.setLoading(false);
    // });
  },
  mounted() {},
  activated() {
    this.initPages();
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
    // this.setDisabled(false);
    // this.refreshFun(() => {
    //   this.page = 1;
    //   this.getNews();
    //   this.setLoading(false);
    // });
  },
  deactivated() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
    this.setDisabled(true);
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
    }),
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    initPages(){
      this.getSchoolData();
      this.getHotSchoolData();
      this.getCollegePulldown();
    },
    toPath(path){
      this.$router.push(path);
    },
    handleFilter(){
      this.page = 1;
      this.getSchoolData();
    },
    eventListener() {
      this.throttle(this.pullUp, 300);
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      // console.log(scrollTop + "+" + clientHeight + ">=" + scrollHeight);
      //适配处理:-120的是距离底部120px触发上拉加载，而不是触底加载
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        // console.log("上拉加载1");
        if (this.total <= this.school_list.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.page++;
        this.getSchoolData("pullup");
        console.log("上拉加载2");
      }
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = (m) => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    //获取院校
    async getSchoolData(fetch_type) {
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        sort: "id",
        sortType: "desc",
      };
      Object.keys(this.search_form).map(item=>{
        if(this.search_form[item] != 'all'){
          if(item == 'region'){
            params = {
              ...params,
              schoolProvinceId:this.search_form[item]
            }
          }
          if(item == 'hierarchy'){
            params = {
              ...params,
              schoolEducationLevelId:this.search_form[item]
            }
          }
          if(item == 'type'){
            params = {
              ...params,
              schoolCollegeMajorId:this.search_form[item]
            }
          }
          
        }
      })
      let result = await getSchoolCollege(params);
      if (result && result.data && result.data.code == 200) {
        if (fetch_type == "pullup") {
          this.school_list = [...this.school_list, ...result.data.data.rows];
        } else {
          this.school_list = result.data.data.rows;
        }
        this.total = result.data.data.total;
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    //获取热门院校
    async getHotSchoolData() {
      this.SET_IS_LOADING(true);
      let params = {
        sort: "id",
        sortType: "desc",
        isHot:1
      };
      let result = await getSchoolCollege(params);
      if (result && result.data && result.data.code == 200) {
        this.hot_school_list = result.data.data.rows;
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    //获取下拉选项
    async getCollegePulldown() {
      this.SET_IS_LOADING(true);
      let result = await getCollegePulldown();
      if (result && result.data && result.data.code == 200) {
        let schoolProvinces = result.data.data.schoolProvinces.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
        let schoolEducationLevels = result.data.data.schoolEducationLevels.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
        let schoolCollegeMajors = result.data.data.schoolCollegeMajors.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        })
        this.region_list = [{
          text: "区域",
          value: "all",
        },...schoolProvinces];
        this.hierarchy_list = [{
          text: "层次",
          value: "all",
        },...schoolEducationLevels];
        this.type_list = [{
          text: "专业",
          value: "all",
        },...schoolCollegeMajors];
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
  },
};
</script>
<style lang='scss' scoped>
.page-mobile-school {
  min-height: 100vh;
  // min-height: calc(100vh - 1.6rem);
  font-size: 0.3rem;
  background-color: #f7f7fa;
  .hot-yx-menu{
    width: 7.2rem;
    display: flex;
    padding: .2rem 0;
    flex-wrap: wrap;
    background: #ffffff;
    .yx-rec-item{
      width: 25%;
      text-align: center;
      img{
        width: 1rem;
        height: 1rem;
        display: block;
        // background: var(--theme-color);
        background: #ffffff;
        // border-radius: 50%;
        overflow: hidden;
        margin: .2rem auto 0;
      }
      h3{
        line-height: .576rem;
        font-size: .2688rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .select-action {
    height: 0.8rem;
    .select-menu {
      width: 100%;
    }
  }
  .yx-list{
    padding: .3rem 0;
    .yx-item{
      width: 6.624rem;
      margin: 0 auto;
      height: 2rem;
      border-radius: .1rem;
      border: 1px solid #f2eeee;
      // border: 1px solid rgb(196, 196, 196);
      margin-bottom: .3rem;
      background: #ffffff;
      display: flex;
      &:last-child{
        margin-bottom: 0;
      }
      .yx-item-left{
        position: relative;
        width: 2rem;
        height: 2rem;
        img{
          width: 1.536rem;
          height: 1.536rem;
          display: block;
          // border-radius: 50%;
          overflow: hidden;
          position: absolute;
          background: #fff;
          // background: var(--theme-color);
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
      }
      .yx-item-right{
        width: 4.624rem;
        box-sizing: border-box;
        padding: .1rem;

        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        h3{
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: .3rem;
          line-height: .5rem;
          margin-bottom: .1rem;
        }
        p{
          color: rgb(185, 184, 184);
          font-size: .2688rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
  }
  .footer {
    padding: 0.3rem;
    font-size: 0.26rem;
    color: #babec2;
    text-align: center;
    .tips {
      position: relative;
    }
    .tips::before {
      content: "";
      display: block;
      position: absolute;
      left: -1.7rem;
      top: 50%;
      transform: translateY(-1px);
      width: 1.5rem;
      height: 1px;
      background: #babec2;
    }
    .tips::after {
      content: "";
      display: block;
      position: absolute;
      right: -1.7rem;
      top: 50%;
      width: 1.5rem;
      transform: translateY(-1px);
      height: 1px;
      background: #babec2;
    }
  }
}
</style>